<template>
  <z-paging ref="paging" v-model="dataList" @query="queryList">
    <view h-60rpx flex items-center box-border px-40rpx text-24rpx text="#7D7D7D" mb>注：只保留近一个月的历史会话</view>
    <nut-swipe-group lock>
      <nut-swipe v-for="(item, index) in dataList" :name="'swipe' + index" rounded-20rpx>
        <view w-full h-160rpx flex items-center box-border px-40rpx @click="changeChat(item)">
          <view
            w-100rpx
            h-100rpx
            shrink-0
            rounded-full
            flex
            items-center
            justify-center
            mr-20rpx
            :style="{ backgroundColor: colors[index % colors.length] }">
            <image w-70rpx h-70rpx rounded-full src="@/pages/funcPages/static/aiChat/chat.png"></image>
          </view>
          <view w-full h-80rpx flex flex-col justify-between>
            <view line-clamp-1 font-500 text-28rpx>{{ item.title }}</view>
            <view line-clamp-1 text="#7D7D7D" text-24rpx>{{ item.message }}</view>
          </view>
        </view>
        <template #right>
          <view flex w-280rpx h-full>
            <view w-140rpx h-full flex flex-col justify-center items-center bg="#FCC300" @click="edit(item)">
              <image w-40rpx h-40rpx mr-10rpx src="@/pages/funcPages/static/aiChat/edit.png"></image>
              <view text="#fff" text-28rpx mt-16rpx>编辑</view>
            </view>
            <view w-140rpx h-full flex flex-col justify-center items-center bg="#D14141" @click="confirmDel(item)">
              <image w-40rpx h-40rpx mr-10rpx src="@/pages/funcPages/static/aiChat/delete.png"></image>
              <view text="#fff" text-28rpx mt-16rpx>删除</view>
            </view>
          </view>
        </template>
      </nut-swipe>
    </nut-swipe-group>
  </z-paging>
</template>

<script setup lang="ts">
import { conversationList, updateConversationTitle, deleteConversation } from '@/api/aiChat'
import storage from '@/utils/storage'
const paging = ref<any>(null)

const form = ref<any>({
  title: '',
  conversationId: ''
})
const dataList = ref<any>([])
const colors = ref(['#FAD53C', '#FF9162', '#AC9CDD', '#8DDDA2'])
const queryList = (pageNo: number, pageSize: number) => {
  conversationList({ pageNumber: pageNo, pageSize })
    .then((res: any) => {
      console.log(res)
      paging.value.complete(res.data.result.records)
    })
    .catch(() => paging.value.complete(false))
  // paging.value.complete([1, 2, 3, 4, 5, 6, 7, 8])
}
function edit(item: any) {
  form.value = {
    conversationId: item.conversationId,
    title: item.title
  }
  uni.showModal({
    title: '对话标题',
    content: item.title,
    editable: true,
    placeholderText: '请输入对话标题',
    confirmColor: '#FCC300',
    cancelColor: '#707175',
    success(res) {
      if (res.confirm) {
        submit(res.content)
      } else if (res.cancel) {
      }
    }
  })
}

function submit(title: any) {
  if (!title.trim()) {
    uni.showToast({ title: '请输入对话标题', icon: 'none' })
    return
  }
  updateConversationTitle({ ...form.value, title: title }).then(() => {
    uni.showToast({
      title: '修改成功',
      icon: 'none',
      duration: 3000
    })
    paging.value.reload()
  })
}
function confirmDel(item: any) {
  form.value = {
    conversationId: item.conversationId,
    title: item.title
  }
  uni.showModal({
    title: '对话标题',
    content: '确定删除对话吗?',
    confirmColor: '#FCC300',
    cancelColor: '#707175',
    success(res) {
      if (res.confirm) {
        deleteConversation({ conversationId: form.value.conversationId }).then(() => {
          uni.showToast({
            title: '删除成功',
            icon: 'none',
            duration: 3000
          })
          paging.value.reload()
        })
      } else if (res.cancel) {
      }
    }
  })
}

function changeChat(item: any) {
  storage.setAiChatInfo(item)
  uni.navigateBack({
    delta: 1
  })
}
</script>
<style>
page {
  background-color: #fff;
}
</style>
<style scoped lang="scss"></style>
